<template>
	<yin-login-logo></yin-login-logo>
	<div class="sign">
		<div class="sign-head">
			<span>帐号登录</span>
		</div>
		<el-form ref="signInForm" status-icon :model="registerForm" :rules="SignInRules">
			<el-form-item prop="email">
				<el-input placeholder="邮箱" v-model="registerForm.email"></el-input>
			</el-form-item>
			<el-form-item prop="password">
				<el-input
					type="password"
					placeholder="密码"
					v-model="registerForm.password"
					@keyup.enter="handleLoginIn"
				></el-input>
			</el-form-item>
			<el-form-item class="sign-btn">
				<el-button @click="handleSignUp">注册</el-button>
				<el-button type="primary" @click="handleLoginIn">登录</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script lang="ts">
import { defineComponent, reactive, getCurrentInstance, onMounted } from "vue";
import mixin from "@/mixins/mixin";
import YinLoginLogo from "@/components/layouts/YinLoginLogo.vue";
import { HttpManager } from "@/api";
import { NavName, RouterName, SignInRules } from "@/enums";

export default defineComponent({
	components: {
		YinLoginLogo,
	},
	setup() {
		const { proxy } = getCurrentInstance();
		const { routerManager, changeIndex } = mixin();

		// 登录用户名密码
		const registerForm = reactive({
			email: "",
			password: "",
		});

		async function handleLoginIn() {
			let canRun = true;
			(proxy.$refs["signInForm"] as any).validate((valid) => {
				if (!valid) return (canRun = false);
			});
			if (!canRun) return;

			try {
				const email = registerForm.email;
				const password = registerForm.password;
				const result = (await HttpManager.signIn({ email, password })) as ResponseBody;
				(proxy as any).$message({
					message: result.message,
					type: result.type,
				});

				if (result.success) {
					proxy.$store.commit("setUserId", result.data[0].id);
					proxy.$store.commit("setUsername", result.data[0].username);
					proxy.$store.commit("setUserPic", result.data[0].avator);
					proxy.$store.commit("setToken", true);
					changeIndex(NavName.Home);
					routerManager(RouterName.Home, { path: RouterName.Home });
				}
			} catch (error) {
				console.error(error);
			}
		}

		function handleSignUp() {
			routerManager(RouterName.SignUp, { path: RouterName.SignUp });
		}
		onMounted(() => {
			console.log("proxy", (proxy as any).$message);
		});
		return {
			registerForm,
			SignInRules,
			handleLoginIn,
			handleSignUp,
		};
	},
});
</script>

<style lang="scss" scoped>
@import "@/assets/css/sign.scss";
</style>
